<template>
  <div class="NewQuipment">
    <div class="Title">
      <div class="blue"></div>
      <span class="title">设备详情</span>
      <el-button
        class="right-box"
        type="info"
        icon="el-icon-back"
        onclick="window.history.go(-1)"
      >返回</el-button>
    </div>
    <div class="newQuipment">
      <div class="newMessage">
        <p class="Headline">基本信息</p>
        <div class="up" :v-model="form">
          <div class="accMessage">
            <span class="accspan">设备型号</span>
            <el-input class="wb" v-model="form.equipmenttype"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">设备名称</span>
            <el-input class="wb" v-model="form.equipmentname"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">设备类别</span>
            <el-input class="wb" v-model="form.equipmentcategory"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">下次保养日期</span>
            <el-input class="wbs" v-model="form.nextmaintenanceon"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">设备位置</span>
            <el-input class="wb" v-model="form.address"></el-input>
          </div>
        </div>
      </div>
      <div class="newMessage_low">
        <div class="newQuipmentLeft">
          <p class="Headline">设备信息</p>
          <div class="leftLow">
            <div class="Low">
              <span class="accspan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生产日期</span>
              <el-input class="wb" v-model="form.productionon"></el-input>
            </div>
            <div class="Low">
              <span class="accspan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;购置日期</span>
              <el-input class="wb" v-model="form.purchaseon"></el-input>
            </div>
            <div class="Low">
              <span class="accspan">保养周期(月)</span>
              <el-input class="wb" v-model="form.maintenancecycle"></el-input>
            </div>
            <div class="Low">
              <span class="accspan">设备寿命(年)</span>
              <el-input class="wb" v-model="form.equipmentlife"></el-input>
            </div>
          </div>
          <div class="leftuplow">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="picpath" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="newQuipmentRight">
          <p class="Headline">维保记录</p>
          <el-table :data="tableData" stripe>
            <el-table-column prop="text" label="序号" align="center"></el-table-column>
            <el-table-column label="维修类别" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.value" placeholder="请选择">
                  <el-option
                    v-for="item in selectDataweixiu"
                    :value="item.key"
                    :label="item.value"
                    :key="item.key"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop label="维修内容" align="center">
              <el-input></el-input>
            </el-table-column>
            <el-table-column prop label="维修日期" align="center">
              <div class="block">
                <el-date-picker type="maintenanceon" placeholder="选择日期"></el-date-picker>
              </div>
            </el-table-column>
            <el-table-column prop="maintenancecredentialspath" label="维修凭证" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="empphone_Btn">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-button type="primary">确认</el-button>
          <el-button type="info" onclick="window.history.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [
        {
          text: "1"
        },
        {
          text: "2"
        },
        {
          text: "3"
        },
        {
          text: "4"
        },
        {
          text: "5"
        },
        {
          text: "6"
        }
      ],
      index: 1,
      form: {},
      imageUrl: "",
      value: "",
      index: 0,
      Detail: "",
      // allName: {},
      selectDataweixiu: []
    };
  },
  created() {
    this.Detail = this.$route.query.name;
    console.log(this.$route.query.name);
    this.getXiangq();
    // this.getweixiu();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 详情
    getXiangq() {
      // var obj = {
      //   equipmentno: this.Detail
      // };
      // var objs = JSON.stringify(obj);
      axios(
        "apis/DeviceManagement.asmx/Det_Device?index=1" +
          "&jsondata=" +
          this.Detail
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        // console.log("list");
        console.log(datas);
        var list = JSON.parse(datas.string.__text);
        console.log("list");
        console.log(list);
        this.form = list.mess;
        var dd = new Date(parseInt(list.mess.nextmaintenanceon.substr(6, 13)));
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = dd.getDate();
        d = d < 10 ? "0" + d : d;
        list.mess.nextmaintenanceon = y + "-" + m + "-" + d + " ";
        var dd = new Date(parseInt(list.mess.productionon.substr(6, 13)));
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = dd.getDate();
        d = d < 10 ? "0" + d : d;
        list.mess.productionon = y + "-" + m + "-" + d + " ";
        var dd = new Date(parseInt(list.mess.purchaseon.substr(6, 13)));
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = dd.getDate();
        d = d < 10 ? "0" + d : d;
        list.mess.purchaseon = y + "-" + m + "-" + d + " ";
      });
    }
    // 维修类别
    // getweixiu() {
    //   axios("apis/CommondMethod.asmx/Dropdown?target=设备类别").then(
    //     ({ data }) => {
    //       var datas = this.$x2js.xml2js(data);
    //       console.log("下拉");
    //       console.log(datas);
    //       var optionlist = JSON.parse(datas.string.__text);
    //       console.log(optionlist);
    //       this.selectDataweixiu = optionlist;
    //     }
    //   );
    // }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.NewQuipment {
  width: 98%;
  //   height: 700px;
}
.Title {
  width: 99%;
  height: 35px;
  margin-top: 10px;
}
.blue {
  width: 5px;
  height: 20px;
  background-color: $red;
  margin-left: 20px;
  margin-top: 5px;
  float: left;
}
.title {
  margin-left: 10px;
  line-height: 35px;
}
.newQuipment {
  width: 99%;
  height: 100%;
  margin-left: 15px;
  margin-top: 10px;
  //   border: 1px solid #000;
}
.newQuipmentLeft {
  width: 43%;
  height: 500px;
  display: inline-block;
  background-color: $white;
  border: 1px solid $linecolor;
}
.newQuipmentRight {
  width: 55%;
  height: 500px;
  float: right;
  background-color: $white;
  border: 1px solid $linecolor;
}
.Headline {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  color: $fontcolor;
  padding-left: 15px;
  border-bottom: 1px solid $linecolor;
}
.newMessage {
  width: 98%;
  margin: 0 auto;
  background-color: $white;
  border: 1px solid $linecolor;
}
.newMessage_low {
  width: 98%;
  margin: 0 auto;
  margin-top: 15px;
  //   border: 1px solid #000;
}
.up {
  width: 99%;
  //   border: 1px solid red;
}
.accMessage {
  width: 17.5%;
  height: 50px;
  margin-top: 20px;
  margin-left: 15px;
  display: inline-block;
  min-width: 165px;
}
.wb {
  width: 53%;
  // float: right;
}
.wbs {
  width: 51%;
}
.leftLow {
  width: 99%;
  margin-left: 14px;
  //   border: 1px solid #000;
}
.Low {
  width: 47%;
  display: inline-block;
  margin-top: 10px;
  //   border: 1px solid #000;
}
.leftuplow {
  //   width: 49%;
  //   border: 1px solid #000;
  margin-left: 15px;
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  border: 1px solid $linecolor;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  //   border: 1px solid #000;
  display: block;
}
.empphone_Btn {
  width: 99%;
  height: 100px;
  margin-top: 30px;
  text-align: center;
  // border: 1px solid #000;
}
.right-box {
  float: right;
  margin-right: 2%;
  border-radius: 5px;
}
</style>
